<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div id="line" style="width: 450px;height: 450px;transform: translateY(-20px)" />
  </div>


</template>

<script>
  let echarts = require('echarts')
  export default {
    name: "prince",
    props:['prop'],
    data(){
      return {
      }
    },

    methods:{
      init(){
       let options = {
          // backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },

          xAxis: [{
            show: true,
            type: 'category',
            axisLine: {
              show: true
            },
            splitArea: {
              // show: true,
              color: '#f00',
              lineStyle: {
                color: '#f00'
              },
            },
            axisLabel: {
              color: '#56aa8d',
              formatter: (value) => {
                if(value >= 10000){
                  return value/10000 + '万元'
                }
                else if(value >= 1000){
                  return value/1000 + '千元'
                }
                return value
              },
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: this.prop.xAxis,

          }],
          grid: {
            x: '15%',
            y: '8%',
            x2: '13%',
            y2: '8%',
            borderWidth: 1
          },
          yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#64b8a8',
              },
              formatter: (value) => {
                  if(value >= 10000){
                  return value/10000 + '万'
                }
                else if(value >= 1000){
                  return value/1000 + '千'
                }
                return value
              }
            },
            axisTick: {
              show: false,
            },
          }],
          series: [{
            name: '数量',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: false,
            symbol: 'circle',
            symbolSize: 2,
            lineStyle: {
              normal: {
                color: "#00b3f4",
              },
            },
            itemStyle: {
              color: "#00b3f4",

            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,179,244,0.3)'
                },
                  {
                    offset: 1,
                    color: 'rgba(0,179,244,0)'
                  }
                ], false),
                shadowColor: 'rgba(0,179,244, 0.9)',
                shadowBlur: 20
              }
            },
            data:this.prop.data
          },

          ]
        };

        let linearBarDom = echarts.getInstanceByDom(document.getElementById('line'))
        if(linearBarDom == null){
          linearBarDom = echarts.init(document.getElementById('line'))
        }
        linearBarDom.resize()
        linearBarDom.setOption(options,false)

      }
    },
    watch: {
      prop: {
        handler (val) {
          this.init()
        },
        deep: true
      }
    },
    mounted () {
      this.init()
    },

  }
</script>

<style scoped lang="scss">

</style>
